<template>
	<view class="" style="padding-bottom: 200rpx;">
		<Header title="访题案例" :isHome="true" :isWhite='true'></Header>
		<view class="">
			<view class="main" :key="index">
				<!-- <view class="" style="display: flex;align-items: center;"> -->
				<span class="typeLogo" v-if="subjectList[count].answer_type=='FILL'">
					填空题
				</span>
				<span class="typeLogo" v-if="subjectList[count].answer_type=='JUDGE'">
					判断题
				</span>
				<span class="typeLogo" v-if="subjectList[count].answer_type=='ONE'">
					单选
				</span>
				<span class="typeLogo" v-if="subjectList[count].answer_type=='MANY'">
					多选
				</span>
				<span class="title">{{count+1}}、{{subjectList[count].topic}}
					<!-- <rich-text :nodes="subjectList[count].topic"></rich-text> -->
				</span>
				<!-- </view> -->
				<!-- 填空选项 -->
				<span class="title" v-if="subjectList[count].answer_type=='FILL'"
					style="margin-right: 10rpx; margin-top: 40rpx;display: flex;align-items: center;">请输入您的答案： <input
						type="text" v-model="answer[count]"
						style="width: 50%;border-bottom: 1px solid #000;padding: 0 20rpx;" /> </span>

				<view class="" v-if="subjectList[count].images" v-for="i in subjectList[count].images">
					<image :src="imgUrl+i" mode="" class="textbook"></image>
				</view>
				<!-- 选项 -->
				<view class="">
					<checkbox-group @change="checkboxChange" v-if="subjectList[count].answer_type=='MANY'"
						style="margin-top: 100rpx;">
						<label class="uni-list-cell" v-for="(itm,inx) in subjectList[count].option" :key="inx"
							:class="{ 'uni-list-cell-pd':answer[count] && answer[count].includes(inx) }">
							<view>
								<checkbox :value="inx" :checked="answer[count] && answer[count].includes(inx)"
									style="transform:scale(0.7)" color="#1A1A1A" />
							</view>
							<image src="/static/three.png" mode="" class="three"></image>
							{{inx}}.{{itm}}
						</label>
					</checkbox-group>
					<radio-group @change="radioChange" style="margin-top: 100rpx;" v-else>
						<label class="uni-list-cell" v-for="(itm,inx) in subjectList[count].option" :key="inx"
							:class="{ 'uni-list-cell-pd':inx === answer[count] }">
							<view>
								<radio :value="inx" :checked="inx === answer[count]" style="transform:scale(0.7)"
									color="#1A1A1A" />
							</view>
							<image src="/static/three.png" mode="" class="three"></image>
							{{inx}}.{{itm}}
						</label>
					</radio-group>
				</view>
			</view>
			<view class="" v-if="show[count]==true">
				<view class="all">
					<view class="answer">
						<view class="">
							<view class="rightAnswer">
								正确答案：<span
									v-if="subjectList[count].answer_type=='MANY'">{{JSON.parse(subjectList[count].answer).join(',')}}</span>
								<span v-else>{{subjectList[count].answer}}</span>
							</view>
							<view :class="isTrue[count]==1?'selectedAnswerRight':'selectedAnswerWrong'">
								已选答案：<span>{{answer[count]}}</span>
							</view>
						</view>
						<view class="" v-if="isTrue[count]==1">
							<image src="/static/right.png" mode="" class="wrong"></image>
						</view>
						<view class="" v-if="isTrue[count]==2">
							<image src="/static/wrong.png" mode="" class="wrong"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="bottom-info">
					<view class="">
					</view>
					<view class="bottom-flex">
						<view class="changeBtn" v-if="count+1>1" @click="previous">
							上一题
						</view>
						<view class="changeBtndis" v-if="count+1==1">
							上一题
						</view>
						<view class="changeBtn" v-if="count+1!=subjectList.length" @click="next">
							下一题
						</view>
						<view class="changeBtndis" v-if="count+1==subjectList.length">
							下一题
						</view>
						<view class="changeBtn"
							v-if="subjectList[count].answer_type=='MANY'||subjectList[count].answer_type=='FILL'"
							@click="chooseSubmit()">
							提交
						</view>
					</view>
					<view class="">
						<span class="count">{{count+1}}/</span>
						<span class="totalCount">{{subjectList.length}}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get,
		img_url,
		post
	} from '../../utils/request';
	export default {
		data() {
			return {
				id: '',
				imgUrl: img_url,
				count: 0,
				totalCount: 4,
				selectedOptions: {},
				answer: {},
				fillAnswer: '',
				show: [],
				isTrue: [],
				subjectList: []
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.getPaperInfo()
		},
		methods: {
			getPaperInfo() {
				get('/paper/cases?questions_id=' + this.id).then(res => {
						this.subjectList = res.data
						if (this.subjectList.length == 0) {
							uni.showToast({
								title: '暂无相关仿题',
								icon: 'error'
							})
							setTimeout(function() {
								uni.navigateBack()
							}, 1000)
						}
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			next() {
				// this.show[this.count] = false
				const count = this.count + 1
				if (count != this.subjectList.length) {
					this.count++
				}
			},
			previous() {
				// this.show[this.count] = false
				if (this.count > 0) {
					this.count--
					if (this.selectedOptions[this.count] !== undefined) {
						this.$nextTick(() => {});
					}
				}
			},
			chooseSubmit() {
				var questionIndex = this.count; // 假设当前显示的是第 count 道题
				// if(this.subjectList[questionIndex].answer_type=='FILL'){
				// 	this.answer[questionIndex] = this.fillAnswer
				// }
				this.submit(this.answer[questionIndex])
				this.$forceUpdate();
				// this.show[this.count] = false
			},
			checkboxChange(e) {
				// 多选
				const selectedValue = e.detail.value;
				const questionIndex = this.count; // 假设当前显示的是第 count 道题
				this.answer[questionIndex] = selectedValue;
				this.$forceUpdate();
			},
			radioChange(e) {
				// 单选
				const selectedValue = e.detail.value;
				const questionIndex = this.count; // 假设当前显示的是第 count 道题
				this.answer[questionIndex] = selectedValue;
				this.$forceUpdate();
				this.submit(selectedValue)
				// this.show[this.count] = false
			},
			submit(answer) {
				var questionIndex = this.count; // 假设当前显示的是第 count 道题
				if (Array.isArray(answer)) {
					var q_answer = JSON.parse(this.subjectList[questionIndex].answer)
				} else if (typeof answer === 'string') {
					var q_answer = this.subjectList[questionIndex].answer
				}
				post('/paper/submit_paper', {
						q_answer: q_answer,
						answer: answer,
						answer_type: this.subjectList[questionIndex].answer_type
					}).then(res => {
						console.log(res);
						this.isTrue[this.count] = res.data // 1正确 2错误
						this.show[this.count] = true
						this.$forceUpdate();
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 30rpx;

		.uni-list-cell-pd {
			position: relative;
			display: flex;
			align-items: center;
			padding: 20rpx;
			border: 3rpx solid #222;
			border-radius: 12rpx;
			margin: 40rpx 0;
			background: #FFEBC2;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}

		.uni-list-cell {
			position: relative;
			display: flex;
			align-items: center;
			padding: 20rpx;
			border: 3rpx solid #222;
			border-radius: 12rpx;
			margin: 40rpx 0;
			background-color: #fff;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}

		.typeLogo {
			background-image: linear-gradient(90deg, #FAE17D 0%, #FFD275 100%);
			border-radius: 4rpx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 22rpx;
			color: #222222;
			padding: 5rpx 10rpx;
			margin-right: 20rpx;
		}

		.title {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #222222;
		}

		.three {
			width: 66rpx;
			height: 34rpx;
			position: absolute;
			top: -12rpx;
			right: 54rpx;
		}
	}

	.all {
		width: 686rpx;
		background: #F0F0F0;
		padding: 28rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		margin: 20rpx auto;

		.allBtn {
			display: flex;
			justify-content: flex-end;
			padding: 20rpx 0;
			border-top: 1rpx solid #ccc;
			margin-top: 20rpx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 26rpx;
			color: #1A1A1A;

			view {
				width: 144rpx;
				height: 56rpx;
				border-radius: 6rpx;
				text-align: center;
				line-height: 56rpx;
			}

			.case {
				border: 2rpx solid #1A1A1A;
			}

			.analysis {
				margin-left: 20rpx;
				background: #FFD275;

			}
		}
	}

	.answer {

		display: flex;
		align-items: center;
		justify-content: space-between;

		.wrong {
			width: 100rpx;
			height: 100rpx;
		}

		.rightAnswer {
			margin-bottom: 12rpx;

			span {
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 28rpx;
				color: #222222;
			}
		}

		.selectedAnswerRight {
			margin-bottom: 12rpx;

			span {
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 28rpx;
				color: #38BD69;
			}
		}

		.selectedAnswerWrong {
			margin-bottom: 12rpx;

			span {
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 28rpx;
				color: #F54040;
			}
		}
	}

	.textbook {
		width: 686rpx;
		height: 300rpx;
		margin: 20rpx auto 0;
	}

	.bottom {
		position: fixed;
		width: 100%;
		// height: 188rpx;
		padding-bottom: 50rpx;
		bottom: 0;
		background-color: #fff;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 26rpx;
		color: #222222;

		.submitBtn {
			width: 510rpx;
			height: 96rpx;
			background: #FFD275;
			border-radius: 48rpx;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 32rpx;
			color: #1A1A1A;
			text-align: center;
			line-height: 96rpx;
			margin: 0 auto;
		}

		.bottom-info {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 35rpx 0;
			box-sizing: border-box;

			.count {
				color: #222222;
				font-size: 26rpx;
				font-family: PingFangSC;
				font-weight: 600;
				line-height: 36rpx;
			}

			.totalCount {
				color: #999999;
				font-size: 26rpx;
				font-family: PingFangSC;
				font-weight: 400;
			}

			.changeBtn {
				width: 130rpx;
				height: 56rpx;
				text-align: center;
				line-height: 56rpx;
				margin-right: 20rpx;
				border: 2rpx solid #222222;
				border-radius: 8rpx;
			}

			.changeBtndis {
				width: 130rpx;
				height: 56rpx;
				text-align: center;
				line-height: 56rpx;
				margin-right: 20rpx;
				border: 2rpx solid #ccc;
				border-radius: 8rpx;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 26rpx;
				color: #CCCCCC;
			}
		}

		.bottom-flex {
			display: flex;
		}
	}
</style>